<template>
  <div class="pennel">
    <el-dialog title="新增员工" :visible="dialogShow" @close="cancle">
      <el-form :model="form" :rules="rules" ref="myform">
        <el-form-item label="姓名：" label-width="100px" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="手机：" label-width="100px" prop="mobile">
          <el-input v-model="form.mobile"></el-input>
        </el-form-item>
        <el-form-item label="入职时间：" label-width="100px" prop="timeOfEntry">
          <!-- <el-input v-model="form.timeOfEntry"></el-input> -->
          <el-date-picker
            v-model="form.timeOfEntry"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="聘用形式："
          label-width="100px"
          prop="formOfEmployment"
        >
          <!-- <el-input v-model="form.formOfEmployment"></el-input> -->
          <el-select v-model="form.formOfEmployment" placeholder="请选择">
            <el-option
              v-for="item in hireType"
              :key="item.id"
              :label="item.value"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工号：" label-width="100px" prop="workNumber">
          <el-input v-model="form.workNumber"></el-input>
        </el-form-item>
        <el-form-item
          label="部门："
          label-width="100px"
          prop="departmentName"
          class="mydepartmentName"
        >
          <el-input
            v-model="form.departmentName"
            @focus="focusTree"
            @blur="blurTree"
          ></el-input>
          <el-tree
            :data="treeData"
            default-expand-all
            class="mytree"
            :props="{ label: 'name' }"
            :expand-on-click-node="false"
            @node-click="treeClick"
            v-if="showTree"
          >
          </el-tree>
        </el-form-item>
        <el-form-item
          label="转正时间"
          label-width="100px"
          prop="correctionTime"
        >
          <!-- <el-input v-model="form.correctionTime"></el-input> -->
          <el-date-picker
            v-model="form.correctionTime"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import employees from '@/api/constant/employees'
import { getDepartments } from '@/api/departments'
import {addEmployApi} from '@/api/user'
export default {
  props: ['dialogShow','getEmployeeInfo'],
  data () {
    return {
      showTree: false,
      hireType: employees.hireType,
      treeData: [
        {
          label: '北京',
          children: [
            {
              label: '朝阳'
            }
          ]
        }
      ],
      form: {
        username: '',
        mobile: '',
        timeOfEntry: '',
        formOfEmployment: '',
        workNumber: '',
        departmentName: '',
        correctionTime: ''
      },
      rules: {
        username: [{ required: true, message: '不能为空', trigger: 'blur' }],
        mobile: [{ required: true, message: '不能为空', trigger: 'blur' }],
        timeOfEntry: [{ required: true, message: '不能为空', trigger: 'blur' }],
        formOfEmployment: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        workNumber: [{ required: true, message: '不能为空', trigger: 'blur' }],
        departmentName: [
          { required: true, message: '不能为空', trigger: ['change','blur'] }
        ],
        correctionTime: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.getDept()
  },
  methods: {
    blurTree(){
      setTimeout(() => {
        this.showTree = false
      }, 100);
    },
    //得到焦点时触发
    focusTree () {
      this.showTree = true
    },
    //获取部门列表
    async getDept () {
      let res = await getDepartments()
      this.treeData = this.turnData(res.data.depts, '')
      console.log(res)
    },
    //嵌套列表数据
    turnData (arr, pid) {
      let res = []
      arr.forEach(item => {
        if (item.pid == pid) {
          const son = this.turnData(arr, item.id)
          if (son.length > 0) {
            item.children = son
          }
          res.push(item)
        }
      })
      return res
    },
    //点击回调
    treeClick (data) {
      console.log(data)
      this.form.departmentName = data.name
      this.showTree = false
    },
    cancle () {
      this.$emit('update:dialogShow', false)
      this.form = {
        username: '',
        mobile: '',
        timeOfEntry: '',
        formOfEmployment: '',
        workNumber: '',
        departmentName: '',
        correctionTime: ''
      }
      //重置表单验证
      this.$refs.myform.resetFields()
    },
    //提交数据
    async submit(){
      let res = await addEmployApi({...this.form})
      console.log(res);
      //重新获取列表
      this.$emit('getEmployeeInfo')
      this.$message.success('新增员工成功')
      this.cancle()
    }
  }
}
</script>

<style lang="scss">
.pennel {
  .el-form-item__label {
    margin-right: 50px;
  }
  .el-input {
    width: 300px;
  }
  .mydepartmentName {
    position: relative;
    .mytree {
      position: absolute;
      top: 40px;
      left: 50px;
      z-index: 99;
      border: 1px solid #ccc;
      border-radius: 5px;
      width: 300px;
      line-height: 40px;
      height: 300px;
      overflow: scroll;
      .el-tree-node__content {
        height: 40px;
      }
    }
  }
}
</style>
